<!-- 商城退货进度 -->
<template>
	<view class="refund">
		<view class="step" v-if="[0,1,2,3,5,6].includes(Number(orderData.status))">
			<uni-steps v-if="type == 0" class="stepPro" :options="stepData1" active-color="#57BE6A" :active="active" />
			<uni-steps v-if="type == 1" class="stepPro" :options="stepData2" active-color="#57BE6A" :active="active" />
		</view>
		
		<view class="refundFail" v-if="orderData.status == -1">
			<image src="../../../static/images/public/failIcon.png" mode=""></image>
			<text class="title">退款失败</text>
			<text class="failReason">失败原因 : {{orderData.uncheck_reason||''}}</text>
		</view>

		<!-- 标题 -->
		<view class="storeTitle">
			<image v-if="orderData.sellerInfo" :src="orderData.sellerInfo.online_logo" mode=""></image>
			<text v-if="orderData.sellerInfo" class="title">{{orderData.sellerInfo.online_name||''}}</text>
			<text class="yticon icon-you"></text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="item" v-for="(item, index) in orderData.return_goods" :key="index">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.image" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="msg">
					<text class="clamp">{{item.store_name||''}}</text>
					<view class="a">
						<text>{{item.attrInfo.suk||''}}</text>
						<text>× {{item.product_num||''}}</text>
					</view>
					<view class="b">
						<text></text>
						<view v-if="item.attrInfo.length !== 0"><text>￥</text><text>{{item.attrInfo.price||''}}</text></view>
						<view v-else><text>￥</text><text>{{item.price||''}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 退款信息 -->
		<view class="cellBox" v-if="orderData.status != 1||orderData.type==0">
			<view class="cell">
				<text class="tit">退款原因:</text>
				<text class="des">{{orderData.reason}}</text>
			</view>
			<view class="cell">
				<text class="tit">退款金额:</text>
				<text class="des">￥ {{orderData.refund_money||''}}</text>
			</view>
			<view class="cell" v-if="orderData.refund_black_shell_num != 0">
				<text class="tit">退还黑贝壳:</text>
				<text class="des">{{orderData.refund_black_shell_num||''}}</text>
			</view>
			<view class="cell" v-if="orderData.refund_yellow_shell_num != 0">
				<text class="tit">退还黄贝壳:</text>
				<text class="des">{{orderData.refund_yellow_shell_num||''}}</text>
			</view>
			<view class="cell" v-if="orderData.refund_red_shell_num != 0">
				<text class="tit">退还红贝壳:</text>
				<text class="des">{{orderData.refund_red_shell_num||''}}</text>
			</view>
			<view class="cell" v-if="orderData.refund_blue_shell_num != 0">
				<text class="tit">退还蓝贝壳:</text>
				<text class="des">{{orderData.refund_blue_shell_num||''}}</text>
			</view>
			<view class="cell">
				<text class="tit">退还余额:</text>
				<text class="des">￥ {{orderData.refund_now_money||''}}</text>
			</view>
			<view class="cell">
				<text class="tit">申请时间:</text>
				<text class="des">{{orderData.add_time||''}}</text>
			</view>
			<view class="cell">
				<text class="tit">订单编号:</text>
				<text class="des">{{orderData.order_id||''}}</text>
			</view>
		</view>
		<!-- 商户收货信息 -->
		<view class="sellerAddress" v-if="orderData.status == 1&&orderData.type==1">
			<text class="title">商户收货信息:</text>
			<view class="namePhone">
				<text class="name">{{sellerInfo.receive_name||''}}</text>
				<text class="phone">{{sellerInfo.receive_phone||''}}</text>
			</view>
			<text class="address">收货地址 : {{sellerInfo.receive_address||''}}</text>
		</view>
		<!-- 退货物流信息填写 -->
		<view class="refundExpress" v-if="orderData.status == 1&&orderData.type==1">
			<text class="title">填写快递单号:</text>
			<view class="expressCompany">
				<text class="name">选择物流名称</text>
				<text class="yticon icon-xia"></text>
				<input class="expressName" disabled type="text" v-model="expressName"  placeholder="请选择物流公司"  @tap="chooseCompany"/>
			</view>
			<view class="expressNum">
				<text class="name">输入物流单号:</text>
				<input class="num" type="text" v-model="expressNum" placeholder="请输入物流单号"/>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btnBox"  v-if="orderData.status == -1">
			<view class="btn again" @tap="setPhone(1)">联系商户</view>
			<view class="btn again" @tap="refundAgain(orderData.order_type)">再次退货</view>
			<view class="btn again" @tap="setPhone(2)">客服介入</view>
		</view>
		<view class="btnBox" v-else-if="orderData.status == 1&&orderData.type == 1">
			<view class="btn expressBtn" @tap="submitExpress">提交</view>
		</view>
		<view class="btnBox" v-else>
			<view class="btn" @tap="setPhone(1)">联系商户</view>
			<view class="btn" @tap="setPhone(2)">客服介入</view>
		</view>
		<!-- 物流公司选择弹层 -->
		<uni-popup ref="popup" type="center">
			<view class="sellerType">
				<image @tap="close" class="close" src="../../../static/images/center/close.png" mode=""></image>
				<text class="title">
					选择物流公司
				</text>
				<view class="radioBox">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in companyArr" :key="index">
							<view>
								<text>{{item}}</text>
							</view>
							<view>
								<radio color="#FF1F2F" style="transform:scale(0.7)" :value="index"/>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		returnDetail,
		returnDelivery,
		submitDelivery
	} from "@/api/mall.js"
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				id: '',
				type: 0,
				orderData: {},
				stepData1: [{
					title: '提交申请',
				}, {
					title: '商家同意',
				}, {
					title: '退款完成',
				}],
				stepData2: [{
					title: '提交申请',
				}, {
					title: '商家同意',
				}, {
					title: '寄送商品',
				}, {
					title: '商家收货',
				}, {
					title: '退款完成',
				}],
				active: 0,
				sellerInfo:{},//商家收货信息
				companyArr: [],//物流公司列表
				expressId: '',//退货物流公司id
				expressName: '',//退货物流公司名称
				expressNum: '',//退货物流单号
			};
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			returnDetail({
				id: this.id
			}).then(res => {
				this.orderData = res.data
				this.active = res.data.status
				if (this.type == 1) {
					if (res.data.status == 5) {
						this.active = 4
					} else if (res.data.status == 6) {
						this.active = 3
					} else {
						this.active = res.data.status
					}
				} else if (this.type == 0) {
					if (res.data.status == 5) {
						this.active = 2
					} else if (res.data.status == 6) {
						this.active = 1
					} else{
						this.active = res.data.status
					}
				}
				if(res.data.status == 1&&res.data.type == 1) {
					returnDelivery({
						id:this.id
					}).then(res => {
						this.sellerInfo = res.data.sellerInfo
						this.companyArr = res.data.express
					})
				}
			})
		},
		methods: {
			setPhone(type) {
				if (type == 1) {
					uni.makePhoneCall({
						phoneNumber: this.orderData.sellerInfo.online_phone
					})
				} else if (type == 2) {
					uni.makePhoneCall({
						phoneNumber: uni.getStorageSync('servicePhone')
					})
				}
			},
			// 物流公司选择弹窗
			chooseCompany() {
				this.$refs.popup.open()
			},
			//选择物流公司
			radioChange(evt) {
				this.expressId = evt.target.value
				this.expressName = this.companyArr[evt.target.value]
				this.$refs.popup.close()
			},
			// 关闭物流公司选择弹窗
			close() {
				this.$refs.popup.close()
			},
			// 提交物流信息
			submitExpress() {
				uni.showLoading({
					mask:true
				})
				submitDelivery({
					id:this.orderData.id,
					delivery_id:this.expressId,
					delivery_code:this.expressNum
				}).then(res => {
					uni.hideLoading()
					uni.setStorageSync('doRefresh',true)
					uni.redirectTo({
						url:"./refundStep?id=" + this.orderData.id + "&type=" + this.orderData.type
					})
				})
			},
			// 再次退款
			refundAgain(type) {
				if(type == "normal") {
					uni.redirectTo({
						url: "../orderDetail?id=" + this.orderData.order_id
					})
				} else if (type == "replacement") {
					uni.redirectTo({
						url: "/mall/permutation/perOrderDetail?id=" + this.orderData.order_id
					})
				}
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.refund{
		padding-bottom: 120rpx;
		padding-bottom:calc(120rpx + env(safe-area-inset-bottom));
	}
	.step {
		padding: 40rpx 0;
	}
	.refundFail{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
		}
		.title{
			color: #FF1F2F;
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}
		.failReason{
			max-width: 80%;
			color: #666;
			font-size: 26rpx;
			line-height: 40rpx;
			text-align: justify;
		}
	}
	// 标题
	.storeTitle {
		border-top: 20rpx solid #eee;
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 50rpx;
		color: #333;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		border-bottom: 1rpx solid #eee;
		padding: 0 24rpx 30rpx;

		.item {
			margin-top: 30upx;
			height: 140upx;
			display: flex;

			.img {
				width: 140upx;
				height: 140upx;
				background: rgba(220, 220, 220, 1);

				image {
					width: 140upx;
					height: 140upx;
				}
			}

			.msg {
				width: 540upx;
				height: 140upx;
				margin-left: 20upx;

				.clamp {
					height: 30upx;
					line-height: 30upx;
					font-size: 26upx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.a {
					display: flex;
					height: 80upx;
					line-height: 80upx;
					justify-content: space-between;
					font-size: 20upx;
					color: #999;
				}

				.b {
					display: flex;
					height: 30upx;
					line-height: 30upx;
					justify-content: space-between;

					view {
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							font-size: 14upx;
							font-weight: bold;
							color: #FB3737;
						}

						text:nth-of-type(2) {
							font-size: 24upx;
							font-weight: bold;
							color: #FB3737;
						}
					}
				}
			}
		}
	}

	.cellBox {
		padding: 10rpx 32rpx;
		font-size: 26rpx;
		color: rgba(51, 51, 51, 1);

		.cell {
			padding: 10rpx 0;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.tit {
				color: #666;
			}

			.des {
				color: #333;
				font-weight: bold;
			}
		}
	}
	.sellerAddress{
		padding: 30rpx 20rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;

		.title{
			font-weight: bold;
			font-size: 30rpx;
		}
		.namePhone{
			display: flex;
			font-size: 28rpx;
			padding: 20rpx 0;
			.name{
				margin-right: 20rpx;
			}
		}
		.address{
			font-size: 26rpx;
			color: #666;
		}
	}
	.refundExpress{
		padding: 30rpx 20rpx;
		color: #333;
	
		.title{
			font-weight: bold;
			font-size: 30rpx;
		}
		.expressCompany{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			padding: 30rpx 0;
			height: 34rpx;
			position: relative;
			.name{
				line-height: 34rpx;
				margin-right: 20rpx;
			}
			.expressName{
				padding-left: 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				flex: 1;
				border-bottom: 1rpx solid #eee;
				box-sizing: border-box;
			}
			.yticon{
				position: absolute;
				right: 0;
			}
		}
		.expressNum{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			padding: 30rpx 0;
			height: 34rpx;
			position: relative;
			.name{
				line-height: 34rpx;
				margin-right: 20rpx;
			}
			.num{
				padding-left: 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				flex: 1;
				border-bottom: 1rpx solid #eee;
				box-sizing: border-box;
			}
		}
	}
	.btnBox {
		position: fixed;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			width: 300rpx;
			border-radius: 40rpx;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			background-color: $mall-price;
		}
		.again{
			width: 200rpx;
		}
		.expressBtn{
			width: 690rpx;
		}
	}
	.sellerType {
		width: 542rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
	
		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 24rpx;
			height: 24rpx;
		}
	
		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		.radioBox{
			max-height: 70vh;
			overflow-y: auto;
			.uni-list-cell {
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1rpx solid #eee;
				
				view {
					text:nth-of-type(2) {
						color: #999;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
				
			.uni-list-cell:nth-of-type(1) {
				border-bottom: 1rpx solid #f5f5f5;
			}
		}
	}
</style>
